<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!--  首页-->
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 导航栏css 需要通过服务器请求-->
    <link rel="stylesheet" href="/css/nav.css" />
    <!-- 引入 首页css 需要通过服务器请求-->
    <link rel="stylesheet" href="/css/index.css" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body::-webkit-scrollbar {    /* 隐藏滚动条 */
            display: none;/* Chrome, Safari, and Opera */   
        }
        .el-calendar-table .el-calendar-day {
            height: 83px; /* 日历高度  */
        }
        .el-calendar-table td div { /* 修改数字的样式 */
            text-align: center;  
        }
     
    </style>
</head>
<body>
    <div id="app">
        <div th:replace="nav :: nav"></div>
        <div style="margin-top: 60px;"></div>
        <!-- 内容 -->
        <div class="container">
            <div class="left">
                <!-- 日历 -->
                <el-calendar ref="calendar" v-model="value" :first-day-of-week="7"></el-calendar>
            </div>
            <div class="right">
                <div class="top">
                    <!-- 快捷方块 -->
                    <a style="text-decoration: none;color: inherit;" th:href="@{/user/file}">
                        <div class="quick-link">
                            <i style="color: #2E9CFF;" class="el-icon-document"></i>
                            <p>档案管理</p>
                        </div>
                    </a>
                    <a style="text-decoration: none;color: inherit;" th:href="@{/attendance/file}">
                        <div class="quick-link">
                            <i style="color: #FFAB24;" class="el-icon-date"></i>
                            <p>考勤记录</p>
                        </div>
                    </a>
                    <a style="text-decoration: none;color: inherit;" th:href="@{/salary/file}">
                        <div class="quick-link">
                            <i style="color: #ff7c25;" class="el-icon-data-line"></i>
                            <p>工资查询</p>
                        </div>
                    </a>
                    <a v-if="userRole1" style="text-decoration: none;color: inherit;" th:href="@{/account/file}">
                        <div class="quick-link">
                            <i style="color: #0CC0C9;" class="el-icon-s-custom"></i>
                            <p>账号管理</p>
                        </div>
                    </a>
                    <a  v-if="userRole1" style="text-decoration: none;color: inherit;" th:href="@{/log/file}">
                        <div class="quick-link">
                            <i style="color: #e33318;" class="el-icon-document"></i>
                            <p>日志管理</p>
                        </div>
                    </a>
                </div>
                <div class="bottom">
                    <div class="bottom-left">
                        <p>{{userNowName}}，欢迎登录~</p>
                    </div>
                    <div class="bottom-right">
                        <p><strong>项目技术</strong></p>
                        <p><strong>数据库：</strong>MySQL-8.0.30</p>
                        <p><strong>后端框架：</strong>Spring Boot</p>
                        <p><strong>持久层框架：</strong>MyBatis</p>
                        <p><strong>配置文件：</strong>application.yml</p>
                        <p><strong>项目管理工具：</strong>Maven-3.6.1</p>
                        <p><strong>模板引擎：</strong>Thymeleaf</p>
                        <p><strong>前端框架：</strong>Vue.js</p>
                        <p><strong>组件库：</strong>Element UI</p>
                        <p><strong>前后端交互：</strong>Axios</p>
                        <p><strong>项目结构：</strong>MVC 模式</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            user: JSON.parse(localStorage.getItem("user")),
            userRole1: '',//	administrator的权限,boolen
            userRole2: '',//  user的   boolen
            userNowdata: '', // 当前用户的所有数据
            activeIndex: '0',
            userNowName: '',//当前用户姓名

            value: new Date(),
            weekDays: [1, 2, 3, 4, 5],//含星期一到星期五的索引值（1 到 5）
            logData : {// 日志信息 (公用)
                operator: '',
                logType: '',
                recordTime: '',
                operatorIP: "192.168.2.21",
                requestType: '',
                requestInterface: '',
                requestParameters: '',
                responseType: '',
                resdata:'',
                error:''
            },
        },
        created() {
            this.getUserRole(); // 加载用户权限
        },
        mounted() {
            this.setCellStyle(); // 用于手动设置样式
        },
        watch: {
            //watch 部分监听了 value 的变化
            value() {
                this.$nextTick(() => {
                    this.setCellStyle();
                });
            },
        },
        methods: {
            // 账号退出(通用）
            logoutButton() {
                axios.get("/user/logout")
            },
            // 用户权限（通用）
            getUserRole() {
                axios.get("/user/now?username=" + this.user)
                    .then(res => {
                        this.userRole1 = (res.data.UserNowdata[0].role === 'administrator')
                        this.userRole2 = (res.data.UserNowdata[0].role === 'user')
                        this.userNowdata = res.data.UserNowdata
                        this.userNowName = this.userNowdata[0].z_name;
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
            },
            // 日历 工作日下加点
            setCellStyle() {
                const calendarEl = this.$refs.calendar.$el;// this.$refs.calendar.$el 获取到了 <el-calendar> 组件的 DOM 元素
                const cells = calendarEl.querySelectorAll('.el-calendar-table td'); // 使用 querySelectorAll 获取所有单元格元素
                cells.forEach((cell, index) => {
                    if (this.weekDays.includes(index % 7)) {// 判断是否是周一到周五
                        cell.classList.add('week-day');// 添加 week-day 类名
                    }
                });
            },
            // 从接口的res 获取日志 (公用）
            getLog(res){
                this.logData.operator = this.user, // 操作者
                this.logData.recordTime = new Date().toLocaleString(), // 记录时间
                // this.logData.operatorIP = 操作者ip
                this.logData.requestType = res.config.method; // 请求类型
                this.logData.requestInterface = '/api'+ res.config.url;// 请求URL
                this.logData.requestParameters = res.config.data; // 请求参数
                this.logData.responseType = res.headers['content-type'];// 实体主体的媒体类型
                this.logData.resdata = JSON.stringify(res.data).substring(0, 5000);//  响应数据 数组转成字符串，最大写入量5000
         
            },
        },

    });
</script>